<template>
  <div>
    <upper-component @message="handleMessage"></upper-component>
    <lower-component :receivedMessage="message"></lower-component>
  </div>
</template>

<script>
import UpperComponent from "./UpperComponent.vue";
import LowerComponent from "./LowerComponent.vue";

export default {
  components: {
    UpperComponent,
    LowerComponent,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    },
  },
};
</script>
